<template>
    <div class="parent-element-center">
        <canvas class="canvas" id="my_canvas" width="650px" height="650px">
            <!--备用方案-->
        </canvas>
        <div class="element-center">11</div>
    </div>
</template>
<script>
    export default {
        data() {

        },
        mounted() {
            let canvas = document.getElementById('my_canvas');
            let ctx = canvas.getContext('2d');

            ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0,0,50,50);

            ctx.fillStyle = "rgba(0,0,0,.5)";
            ctx.fillRect(50,50,50,50);

            ctx.beginPath();
            ctx.moveTo(100, 100);
            ctx.lineTo(100, 150);
            ctx.lineTo(50, 150);
            ctx.fill();

            let cx = canvas.width / 2;
            let cy = canvas.height / 2;
            let r = 150;
            let lineWidth = 30;
            let startAngle = 0;
            let endAngle = 80 / 100 * 360;

            ctx.beginPath();
            ctx.moveTo(cx + r, cy);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = '#ccc';
            ctx.arc(cx, cy, r, 0, Math.PI * 2);
            ctx.closePath();
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(cx, cy - r);
            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = '#5ba00f';
            ctx.lineCap = 'round';
            ctx.arc(cx, cy, r,
                startAngle *  (Math.PI / 180.0) - (Math.PI / 2),
                endAngle * (Math.PI / 180.0) - (Math.PI / 2),
            );
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = lineWidth - 5;
            ctx.arc(cx, cy, r,
                endAngle * (Math.PI / 180.0) - (Math.PI / 2),
                endAngle * (Math.PI / 180.0) - (Math.PI / 2),
            );
            ctx.stroke();

        }
    }
</script>
<style>
    .parent-element-center {
        position: relative;
        display: inline-block;
        margin-left: 1rem;
        margin-top: 1rem;
    }
    .element-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        font-weight: bold;
    }
    .canvas {
        border: 1px solid #cccccc;
    }
</style>